<template>
    <div>
        <el-button type="primary" style="margin-left: 16px" @click="RoomCodeAdd()">新增商品订单</el-button>
        <el-select v-model="roomcodes.GoodsOrderState" placeholder="全部状态" style="width: 200px;"
            @change="RoomCodeGetlist()">
            <el-option label="上架" value="true" />
            <el-option label="下架" value="false" />
        </el-select>
        <el-input v-model="roomcodes.GoodsName" style="max-width: 300px" placeholder="商品订单名称" class="input-with-select">
            <template #append>
                <el-button @click="RoomCodeGetlist()" :icon="Search" />
            </template>
        </el-input>
    </div>

    <el-table ref="selectedRows" :data="tableData" style="width: 100%; margin-top: 30px;">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="goodsName" label="商品信息" width="150" />
        <el-table-column prop="goodsSumMoney" label="商品总价" width="150" />
        <el-table-column prop="goodsOrderNumber" label="商品数量" width="150" />
        <el-table-column prop="userId" label="顾客名称" width="150">
            <template #default="{ row }">
                <el-tag v-if="row.userId == 1" type="success">张三</el-tag>
                <el-tag v-if="row.userId == 0" type="danger">李四</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="goodsOrderRealMoney" label="实际收款" width="150" />
        <el-table-column prop="voucherState" label="凭证状态" width="150">
            <template #default="{ row }">
                <el-tag v-if="row.voucherState == false" type="success">已核销</el-tag>
                <el-tag v-if="row.voucherState == true" type="danger">未核销</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="goodsOrderState" label="订单状态" width="150">
            <template #default="{ row }">
                <el-tag v-if="row.goodsOrderState == 1" type="success">上架</el-tag>
                <el-tag v-if="row.goodsOrderState == 0" type="danger">下架</el-tag>
            </template>
        </el-table-column>

        <el-table-column label="操作" width="250">
            <template #default="{ row }">
                <el-button type="text" @click="RoomCodeUpdate(row)">编辑</el-button>
                <el-button type="text" @click="RoomCodeDelete(row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>


    <div>
        <el-dialog v-model="roomCodeDialog" title="添加商品订单" width="500">
            <el-form :model="form">

                <el-form-item label="商品信息" :label-width="formLabelWidth">
                    <el-input v-model="form.GoodsName" />
                </el-form-item>
                <el-form-item label="商品总价" :label-width="formLabelWidth">
                    <el-input v-model="form.GoodsSumMoney" style="width: 200px;" />
                </el-form-item>
                <el-form-item label="商品数量" :label-width="formLabelWidth">
                    <el-input v-model="form.GoodsOrderNumber" style="width: 200px;" />
                </el-form-item>
                <el-form-item label="实际收款" :label-width="formLabelWidth">
                    <el-input v-model="form.GoodsOrderRealMoney" style="width: 200px;" />
                </el-form-item>
                <el-form-item label="客户名称" :label-width="formLabelWidth">
                    <el-radio-group v-model="form.UserId">
                        <el-radio value="1">张三</el-radio>
                        <el-radio value="0">李四</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="凭证状态" :label-width="formLabelWidth">
                    <el-radio-group v-model="form.VoucherState">
                        <el-radio :value="false">已核销</el-radio>
                        <el-radio :value="true">未核销</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="订单状态" :label-width="formLabelWidth">
                    <el-radio-group v-model="form.GoodsOrderState">
                        <el-radio :value="true">上架</el-radio>
                        <el-radio :value="false">下架</el-radio>
                    </el-radio-group>
                </el-form-item>

            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="roomCodeDialog = false">关闭</el-button>
                    <el-button type="primary" @click="RoomCodeInsert()">
                        添加
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
    <div>
        <el-dialog v-model="roomCodeUpdateDialog" title="编辑商品订单" width="500">
            <el-form :model="form1">

                <el-form-item label="商品信息" :label-width="formLabelWidth">
                    <el-input v-model="form.GoodsName" />
                </el-form-item>
                <el-form-item label="商品总价" :label-width="formLabelWidth">
                    <el-input v-model="form.GoodsSumMoney" style="width: 200px;" />
                </el-form-item>
                <el-form-item label="商品数量" :label-width="formLabelWidth">
                    <el-input v-model="form.GoodsOrderNumber" style="width: 200px;" />
                </el-form-item>
                <el-form-item label="实际收款" :label-width="formLabelWidth">
                    <el-input v-model="form.GoodsOrderRealMoney" style="width: 200px;" />
                </el-form-item>
                <el-form-item label="客户名称" :label-width="formLabelWidth">
                    <el-radio-group v-model="form.UserId">
                        <el-radio value="1">张三</el-radio>
                        <el-radio value="0">李四</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="凭证状态" :label-width="formLabelWidth">
                    <el-radio-group v-model="form.VoucherState">
                        <el-radio :value="false">已核销</el-radio>
                        <el-radio :value="true">未核销</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="订单状态" :label-width="formLabelWidth">
                    <el-radio-group v-model="form.GoodsOrderState">
                        <el-radio :value="true">上架</el-radio>
                        <el-radio :value="false">下架</el-radio>
                    </el-radio-group>
                </el-form-item>

            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="roomCodeDialog = false">关闭</el-button>
                    <el-button type="primary" @click="RoomCodeUpd()">
                        修改
                    </el-button>
                </div>
            </template>
        </el-dialog>



    </div>
</template>
<script lang="ts" setup>
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import type { ElTable, UploadInstance } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
const dialogTableVisible = ref(false)
const formLabelWidth = '140px'
const tableData = ref([]);

const roomcodes = reactive({
    GoodsOrderState: '',
    GoodsName: '',
})
//钩子函数
onMounted(() => {
    RoomCodeGetlist();
})
const RoomCodeGetlist = () => {
    axios.get('http://120.26.135.179:8033/api/GoodsTypesInfoShow', {
        params: {
            GoodsOrderState: roomcodes.GoodsOrderState,
            GoodsName: roomcodes.GoodsName,
        }
    })
        .then((res) => {
            tableData.value = res.data.data;
        })
}

const roomCodeDialog = ref(false);
//新增商品订单
const form = reactive({
    GoodsName: '',
    GoodsSumMoney: '',
    GoodsOrderNumber: '',
    GoodsOrderRealMoney: '',
    VoucherState: '',
    GoodsOrderState: '',
    roomCodeDialog: true,
    UserId: '',

})
const RoomCodeAdd = () => {
    roomCodeDialog.value = true;
}

const RoomCodeInsert = () => {
    axios.post('http://120.26.135.179:8033/api/GoodsTypesAdd', form)
        .then((res) => {
            if (res.data.code == 0) {
                ElMessage.success(res.data.message)
                roomCodeDialog.value = false;
                RoomCodeGetlist();
            }
            else {
                ElMessage.error(res.data.message)
            }
        })
}

//编辑商品订单
const roomCodeUpdateDialog = ref(false);
const RoomCodeUpdate = (row: any) => {
    roomCodeUpdateDialog.value = true;
    form1.value = row;
}

const form1 = ref({
    id: null,
    GoodsName: '',
    GoodsSumMoney: '',
    GoodsOrderNumber: '',
    GoodsOrderRealMoney: '',
    VoucherState: '',
    GoodsOrderState: '',
    roomCodeDialog: true,
    UserId: '',

})

const RoomCodeUpd = () => {
    axios.put('http://120.26.135.179:8033/api/GoodsTypeUpdate', form1.value)
        .then((res) => {
            if (res.data.code == 0) {
                ElMessage.success(res.data.message)
                roomCodeUpdateDialog.value = false;
                RoomCodeGetlist();
            }
            else {
                ElMessage.error(res.data.message)
            }
        })
}


//删除房号
const RoomCodeDelete = (row: any) => {
    ElMessageBox.confirm('确认要删除吗?', '错误', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            axios.delete('http://120.26.135.179:8033/api/GoodTypeDelete?Id=' + row.id)
                .then((res) => {
                    if (res.data.code == 0) {
                        ElMessage.success(res.data.message)
                        RoomCodeGetlist();
                    }
                    else {
                        ElMessage.error(res.data.message)
                    }
                })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })
}
</script>
